<template>
  <div class="major">
    <div v-for="(item,index) in guanzhumajorbox" :key="index" class="school_list">
      <router-link
        class="router"
        :to="{
                 path: '/MajorDeatil', 
                 query: { majorId: item.schoolId  }}"
      >
        <h4 class="ctyl">{{item.category}}</h4>
        <h3 class="school_name">{{item.oneCategory }}/{{item.twoCategory }}</h3>
      </router-link>
    </div>
    <div class="major1"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      guanzhumajorbox: [],
      pageNow: 0,
      pageSize: 0
    };
  },
  methods: {
    getguanzhu() {
      this.$ajax({
        method: "post",
        url: "/api/follow/listMajor",
        data: {
          pageNow: 1,
          pageSize: 10
        },
        success: res => {
          if (res.data.code == 0) {
            this.guanzhumajorbox = res.data.data.list;
          } else {
          }
        }
      });
    }
  },
  watch: {},
  beforeCreate() {
    this.$nextTick(() => {
      this.getguanzhu();
    });
  }
};
</script>

<style lang="scss" scoped>
.router {
  text-decoration: none;
}
.major {
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
<<<<<<< HEAD

  .school_list {
    width: 240px;
    padding: 0 10px;
=======
  justify-content: center;
  .school_list {
    width: 286px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
    height: 300px;
    border-radius: 10px;
    background: #ffffff;
    margin-top: 24px;
    margin-right: 70px;

    .ctyl {
      padding-top: 50px;
      padding-bottom: 40px;
<<<<<<< HEAD
      font-size: 20px;
=======
      font-size: 24px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
      color: #515151;
      text-align: center;
    }
    .school_name {
      text-align: center;
<<<<<<< HEAD
      font-size: 16px;
      color: #757575;
      line-height: 20px;
=======
      font-size: 20px;
      color: #757575;
>>>>>>> 314b442cce11d658746227581b0160373004c345
      padding-bottom: 24px;
    }
  }
  .school_list:nth-child(3n) {
    margin-right: 0;
  }
  .major1 {
    width: 286px;
    height: 0px;
  }
}
</style>